<template>
  <div id="user">
    <div class="logo">
      <router-link to="/User/My" tag="img" :src="imgSrc" alt="头像" srzcset="">
      </router-link>
      <span>我
        <i class="iconfont icon-male8"></i>
      </span>
      <button @click="exit()">退出</button>
    </div>
    <div class="info">
      <ul>
        <router-link to="/User/ChongZhi" tag="li">
          <i class="iconfont icon-zhuanru" style="color:#259E26;"></i>
          <span>充值</span>
        </router-link>
        <router-link to="/User/TiXian" tag="li">
          <i class="iconfont icon-zhuanchu" style="color:#EB6E3E;"></i>
          <span>提现</span>
        </router-link>
        <router-link to="/User/JiaoYi" tag="li">
          <i class="iconfont icon-wodedingdan" style="color:#2BD9A6;"></i>
          <span>交易记录</span>
        </router-link>
        <router-link to="/User/ShouZhi" tag="li">
          <i class="iconfont icon-daifukuan" style="color:#85B2D1;"></i>
          <span>收支详情</span>
        </router-link>
        <router-link to="/User/My" tag="li">
          <i class="iconfont icon-wodejuhuasuan" style="color:#259E26;"></i>
          <span>个人信息</span>
        </router-link>
        <router-link to="/User/GuiZe" tag="li">
          <i class="iconfont icon-wodefankui" style="color:#EB6E3E;"></i>
          <span>规则</span>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import * as Types from "../../Store/types.js";
import { delCookie } from "../../Tools/cookie.js";
export default {
  data() {
    return {
      imgSrc: require("../../assets/logo.png")
    };
  },
  methods: {
    exit() {
      this.$store.commit(Types.VAILD_LOGIN, false);
      delCookie('userName');
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
#user {
  display: flex;
  flex-direction: column;
}
.logo {
  height: 50vh;
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.logo > img {
  height: 15vh;
  width: 15vh;
  border-radius: 7.5vh;
  background-color: #fff;
  margin: 1rem 0;
  border: 0.125rem solid #fff;
}
.logo > span {
  margin: 1rem 0;
  color: #fff;
  font-size: 1.5rem;
}
.logo > span > i {
  color: #f36868;
  font-size: 1.5rem;
}
.logo > button {
  width: 10vh;
  height: 2rem;
  background-color: #8c8a86;
  border-radius: 1rem;
  border: none;
  color: #d3d2cf;
}
.info {
  height: 40vh;
  background-color: palegreen;
}
.info > ul {
  list-style: none;
  display: flex;
  background-color: #646464;
  flex-wrap: wrap;
  height: 100%;
  margin-bottom: 1px;
}
.info > ul > li {
  width: calc(100%/3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #8c8a86;
  box-sizing: border-box;
  border-collapse: collapse;
}
.info > ul > li:nth-child(2) {
  border-left: 1px solid #8c8a86;
  border-right: 1px solid #8c8a86;
}
.info > ul > li:nth-child(5) {
  border-left: 1px solid #8c8a86;
  border-right: 1px solid #8c8a86;
}
.info > ul > li > i {
  font-size: 2.2rem;
  font-weight: 600;
}
.info > ul > li > span {
  line-height: 2rem;
  color: #8c8a86;
}
</style>